<%@page import="vn.ac.c0910g.assignment.Entity.OrderDetails"%>
<%@page import="java.util.List"%>
<%@page import="vn.ac.c0910g.assignment.DAO.OrderDetailsDAO"%>
<html lang="en"><head>
        <meta charset="utf-8">
        <title>Dashboard I Admin Panel</title>
        <link rel="stylesheet" href="../resources/css/layout2.css" type="text/css" media="screen">
        <!--[if lt IE 9]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
        <script src="../resources/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="../resources/scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
        <script src="../resources/scripts/hideshow.js" type="text/javascript"></script>
        <script src="../resources/scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
        <script src="../resources/scripts/jquery.equalHeight.js" type="text/javascript"></script>
        <script src="../resources/scripts/orderdetails.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $(".tablesorter").tablesorter();
            }
        );
            $(document).ready(function() {

                //When page loads...
                $(".tab_content").hide(); //Hide all content
                $("ul.tabs li:first").addClass("active").show(); //Activate first tab
                $(".tab_content:first").show(); //Show first tab content

                //On Click Event
                $("ul.tabs li").click(function() {

                    $("ul.tabs li").removeClass("active"); //Remove any "active" class
                    $(this).addClass("active"); //Add "active" class to selected tab
                    $(".tab_content").hide(); //Hide all tab content

                    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                    $(activeTab).fadeIn(); //Fade in the active ID content
                    return false;
                });

            });
        </script>
        <script type="text/javascript">
            $(function(){
                $('.column').equalHeight();
            });
        </script>
    </head>
    <%
                OrderDetailsDAO orderDetailsDAO = new OrderDetailsDAO();
                List<OrderDetails> lstorderDetails = orderDetailsDAO.getAllOrderDetails();
    %>
    <body>
        <div id="header" style="background-color: black;height: 50px;margin-top: -15px;">
            <h1 class="site_title" style="background: black;font-weight: 400;color: white;"><a href="index.html" style="color: white;">Website Admin</a></h1>
            <h2 class="section_title" style="margin-left: 600px;margin-top: -30px;color: white;">Dashboard</h2>
            <div class="btn_view_site" style="margin-left: 1150px;margin-top: -50px;"><a href="../Home/index.jsp"> View Site </a></div>
        </div> <!-- end of header bar -->

        <div id="secondary_bar">
            <div class="user">
                <%if (session.getAttribute("admin") != null) {%>
                <p><%=session.getAttribute("admin")%></p>
                <a class="logout_user" title="Logout" id="btnOut">Logout</a>
                <%} else {
                        response.sendRedirect("login.jsp");%>
                <%}%>
            </div>
            <div class="breadcrumbs_container">
                <div class="breadcrumbs"><a href="admin.jsp">Admin</a> <div class="breadcrumb_divider"></div> <a class="current">Order Details</a></div>
            </div>
        </div><!-- end of secondary bar -->

        <div id="sidebar" class="column" style="height:650px; ">
            <form class="quick_search">
                <input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
            </form>
            <hr>
            <h3>Content</h3>
            <ul class="toggle">
                <li class="icn_new_article"><a href="contactus.jsp">Contact Us</a></li>
                <li class="icn_edit_article"><a href="feedback.jsp">Feedback</a></li>
                <li class="icn_categories"><a href="faqs.jsp">FAQs</a></li>
                <li class="icn_tags"><a href="project.jsp">Project</a></li>
            </ul>
            <h3>Members</h3>
            <ul class="toggle">
                <li class="icn_add_user"><a href="admin.jsp">Administrators</a></li>
                <li class="icn_view_users"><a href="users.jsp">Users</a></li>
            </ul>
            <h3>Product</h3>
            <ul class="toggle">
                <li class="icn_folder"><a href="service.jsp">Services</a></li>
                <li class="icn_photo"><a href="category.jsp">Category</a></li>
                <li class="icn_photo"><a href="order.jsp">Orders</a></li>
                <li class="icn_photo"><a href="orderdetail.jsp"><b>Order Details</b></a></li>
                <li class="icn_photo"><a href="payment.jsp">Payment</a></li>
                <li class="icn_photo"><a href="paymentdetail.jsp">Payment Details</a></li>
            </ul>
            <h3>Administrators</h3>
            <ul class="toggle">
                <li class="icn_settings"><a href="#">Options</a></li>
                <li class="icn_security"><a href="#">Security</a></li>
                <li class="icn_jump_back"><a href="#">Logout</a></li>
            </ul>
        </div><!-- end of sidebar -->

        <div id="main" class="column" style="height:650px; ">

            <h4 class="alert_info">Order Details Management</h4>

            <div class="module width_full">
                <div><h3 class="tabs_involved">Order Details Manager</h3>
                    <button id="btnAdd" style=" float: right; margin-top: -30px; margin-right:40px;">Add</button>
                </div>

                <div class="tab_container">
                    <div id="tab1" class="tab_content" style="display: block; ">
                        <table id="tblOrderDetails" class="tablesorter" cellspacing="0">
                            <thead>
                                <tr>
                                    <th class="header" style="font-size: 12px;display: none;">Id</th>
                                    <th class="header headerSortUp" style="font-size:12px;">Unit Price</th>
                                    <th class="header" style="font-size: 12px;">Quantity</th>
                                    <th class="header" style="font-size: 12px;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <%for (OrderDetails od : lstorderDetails) {%>
                                <tr id="<%=lstorderDetails.indexOf(od)%>">
                                    <td style="display: none;"><%=od.getOrderDetailsID()%></td>
                                    <td><%=od.getUnitPrice()%></td>
                                    <td><%=od.getQuantity()%></td>
                                    <td>
                                        <input class="editForm" id="btnEdit<%=lstorderDetails.indexOf(od)%>" type="image" src="../resources/image/icn_edit.png" title="Edit">
                                        <input class="delForm" id="btnDel<%=lstorderDetails.indexOf(od)%>" type="image" src="../resources/image/icn_trash.png" title="Trash">
                                    </td>
                                </tr>
                                <%}%>
                            </tbody>
                        </table>
                    </div><!-- end of #tab1 -->

                </div><!-- end of .tab_container -->

            </div><!-- end of content manager article -->
            <div id="editContainer">
                <div id="editForm">
                    <div><a id="editCloseForm" style="color:red;float: right;margin-top: 13px;width: 20px;">x</a></div>
                    <table>
                        <tbody>
                            <tr>
                                <td class="blank" colspan="7"><h2 style="margin-top: 20px; margin-left: 10px;">Update OrderDetails</h2></td>
                            </tr>
                            <tr>
                                <td class="blank" style="font-size: 12px;padding-left:20px;">Unit Price</td>
                                <td class="blank" style="font-size: 12px;width: 30px;">Quantity</td>
                                <td class="blank"></td>
                            </tr>
                            <tr>
                                <td class="blank">
                                    <input type="text" id="txtPrice" style="width: 130px;margin-left:15px;">
                                </td>
                                <td class="blank">
                                    <input type="text" id="txtQuantity" maxlength="3" style="width: 100px;">
                                </td>
                                <td class="blank">
                                    <button id="saveEdit">Save</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div id="deleteContainer" style="width:200px;height:127px;">
                <div id="deleteForm">
                    <table style="margin-top:20px;">
                        <tr>
                            <td colspan="2" style="font-size:15px;padding-left:10px;">Are you sure want to delete?</td>
                        </tr>
                        <tr>
                            <td><button id="yesDel" style="margin-left:20px">Yes</button></td>
                            <td><button id="noDel">No</button></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </body></html>